<template>
  <div class="ditchBox pageWrapper">
    <Loading :loading="loading">
      <Form :ref="formRef" :label-width="130" :model="formData" inline>
        <Card :bordered="true">
          <p slot="title">商品信息</p>
        <FormItem label="商品名称：" style="width:45%">
          <div>{{formData.productName}}</div>
        </FormItem>
        <FormItem label="商品编号：" style="width:45%">
          <div>{{formData.productCode}}</div>
        </FormItem>
          <Divider dashed/>
        <FormItem label="所属商户：" style="width:45%">
          <div>{{formData.merchantName}}</div>
        </FormItem>
        <FormItem label="商户编码：" style="width:45%">
          <div>{{formData.merchantCode}}</div>
        </FormItem>
        <FormItem label="业务场景：" style="width:45%">
          <div>{{formData.scenarioCn}}</div>
        </FormItem>
        <FormItem label="业务侧产品编码：" style="width:45%">
          <div>{{formData.productCodeBusiness}}</div>
        </FormItem>
        <FormItem label="成本价格：" style="width:45%">
          <div v-if="formData.costType == 1">{{ formData.costPrice }}元</div>
          <div v-if="formData.costType == 2">{{ formData.costPrice }}%售价</div>
        </FormItem>
        <FormItem label="商品详情：" style="width:45%">
          <div>{{formData.productDetail}}</div>
        </FormItem>
        <FormItem label="支付渠道：" style="width:45%">
          <div>{{formData.paymentChannelCn}}</div>
        </FormItem>
        </Card>

        <Card :bordered="true">
          <p slot="title">清分规则</p>
        <div v-for="(item, index) in settlementRule" :key="index">
          <Divider dashed orientation="left">规则{{index + 1}} {{ item.settlementStatusCn }}</Divider>
          <FormItem label="规则名称：" style="width:30%">
            <div>{{item.ruleName}}</div>
          </FormItem>
          <FormItem label="规则类型：" style="width:30%">
            <div>{{item.ruleTypeCn}}</div>
          </FormItem>
          <FormItem label="结算类型：" style="width:30%">
            <div>{{item.settlementTypeCn}}</div>
          </FormItem>
          <FormItem label="产品单价：" style="width:30%">
            <div>{{item.productPrice ? `${item.productPrice}元` : ''}}</div>
          </FormItem>
          <FormItem label="清分规则：" style="width:30%">
            <div>{{ item.clearingRuleCn}}</div>
          </FormItem>
          <FormItem label="平台应收：" style="width:30%">
            <div v-if="item.clearingRule === '3'">{{item.platformReceivable ? `${item.platformReceivable}元` : ''}}</div>
            <div v-if="item.clearingRule === '2'">{{item.platformReceivable ? `${item.platformReceivable}元` : ''}}</div>
            <div v-if="item.clearingRule === '1'">{{ item.platformReceivable }}%</div>
          </FormItem>
          <FormItem label="商户应收：" style="width:30%">
            <div v-if="item.clearingRule === '3'">{{item.merchantReceivable ? `${item.merchantReceivable}元` : ''}}</div>
            <div v-if="item.clearingRule === '2'">{{item.merchantReceivable ? `${item.merchantReceivable}元` : ''}}</div>
            <div v-if="item.clearingRule === '1'">{{ item.merchantReceivable }}%</div>
          </FormItem>
          <FormItem label="清分日期：" style="width:30%">
            <span v-if="item.clearingCycleMode">{{ item.clearingCycleMode == '1' ? `T + ${ item.clearingCycleValue }` : `${ item.clearingCycleValueExt }日 / ${ item.clearingCycleValue }个月`}}</span>
          </FormItem>
          <FormItem label="优先级：" style="width:30%">
            <div>{{item.priorityLevel}}</div>
          </FormItem>
          <FormItem label="有效时间：" style="width:30%">
            <div v-if="item.effectiveDate">{{`${ item.effectiveDate } ~ ${ item.expireDate }`}}</div>
          </FormItem>
        </div>
        </Card>
      </Form>
      <Button type="primary" @click="goBack" style="margin-bottom: 10px">返回</Button>
    </Loading>
  </div>
</template>

<script>
import config from "@/utils/config";
import { namespace } from "../module/merchandise.js";
import {
  InputNumber,
  Input,
  Button,
  Select,
  Form,
  FormItem,
  Message,
  Option,
  DatePicker,
  Tag
} from "view-design";
import Loading from "@/components/Loading";
import RemoteSelect from "@/components/RemoteSelect";
import RemoteTableSelect from "@/components/RemoteTableSelect";
import SearchBar from "@/components/SearchBar";
import Uuid from "uuid";
import Authc from "@/components/Authc";
import util from "@/utils/util";
export default {
  components: {
    InputNumber,
    Loading,
    Input,
    Button,
    Form,
    FormItem,
    Message,
    RemoteSelect,
    RemoteTableSelect,
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem,
    Select,
    Option,
    Authc,
    DatePicker,
    Tag
  },
  props: ["id"],
  beforeMount: async function() {
    let id = this.$route.query.id;
    let response = await this.$store.dispatch(`${namespace}/getDetail`, id);
    if (response.errorCode === 0) {
      this.formData = response.data;
      if (this.formData.costType == 1) {
        this.formData.costPrice = util.toMoney(this.formData.costPrice);
      }
      this.settlementRule = response.data.settlementRuleList
      if (response.data.settlementRuleList == null || !response.data.settlementRuleList.length) {  // 判断返回数组是否有值 无值时添加默认值
        this.settlementRule = [{ruleName: ''}]
      }
    }
  },
  data: function() {
    let vm = this;
    return {
      taxpayerId: this.$route.params.id,
      formRef: Uuid.v1(),
      formData: {},
      settlementRule: [],
      columns: [],
      ditchTitle: ''
    };
  },
  created() {
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    getDitch (value) {
      console.log(value)
      this.ditchTitle = value
    }
  },
  computed: {
    loading: function() {
      let result = this.$store.state[namespace].loading;
      return result;
    }
  }
};
</script>

<style lang="less">
.ditchBox {
  .title{
    border-bottom: 1px solid #999;
    padding-bottom: 6px;
  }
  .tagTitle{
    display: flex;
    padding-bottom: 6px;
    border-bottom: 1px solid #999;
    .tag{
      margin-left: 20px;
    }
  }
}
</style>
